<template>
  <!--  -->
  <div class="container">
    <div class="bg"></div>
    <div class="rankings">
      <table>
        <thead>
          <tr>
            <th>排名</th>
            <th>文章标题(点击标题可跳转)</th>
            <th>作者</th>
            <th>热度</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in testdata" :key="item.id">
            <td>{{index+1}}</td>
            <td @click="goToUrl(index)">{{ item.articleTitle }}</td>
            <td>{{ item.nickName }}</td>
            <td>{{item.hotRankScore}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      testdata:"",

    }
  },
  methods: {
     goToUrl(index) {
          // 跳转逻辑
          window.location.href = this.testdata[index].articleDetailUrl;
          console.log(this.testdata[index].articleDetailUrl);
        },
    getlist() {
      axios.get('http://127.0.0.1:5000/gethotrank', {
            }).then(res => {
              this.testdata=res.data.data
              console.log(this.testdata)
            }).catch(err => {
              console.error(err)
            })
    }
  },
  mounted() {
    this.getlist()
  }
}
</script>
<style scoped lang="scss">
.container {
  width: 100%;
  height:100%;
  justify-content: space-between;
  position: relative;
}
.rankings {
    width: 600px; /* 排行榜宽度 */
    margin: 0 auto; /* 居中显示 */
    position: relative;
    z-index: 1;
}
.bg {
    position: absolute; /* 子元素绝对定位 */
 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("https://img95.699pic.com/photo/40140/9992.gif_wh860.gif");
    background-size: cover;
    animation: bgAnimation 30s linear infinite; /* 背景动画效果，30秒循环 */
}
@keyframes bgAnimation {
    from {background-position: 0 0;} /* 动画起始点 */
    to {background-position: -400px 0;} /* 动画结束点 */
}

table {
    width: 100%; /* 表格占满父容器 */
    border-collapse: collapse; /* 合并表格边框 */
    margin-top: 20px; /* 离标题留一定距离 */
}
th, td {
    border: 1px solid #ccc; /* 表格边框 */
    padding: 10px; /* 每个单元格内边距 */
    text-align: center; /* 水平居中对齐 */
}
th{
    background-color: #f5f5f5; /* 表头背景颜色 */
}
tr{
    background-color: #f5f5f5; /* 鼠标悬停行背景颜色 */
}

</style>